<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./iconfont-destination/iconfont.css">
    <link rel="stylesheet" href="./css/toTravel.css">
    <link rel="stylesheet" href="./css/toTravel_packageTour.css">
    <link rel="stylesheet" href="./iconfont-toTravel/iconfont.css">
    <title>跟团游</title>
    <style>
        .header .head-left-nav .nav-sales .nav-sec {
            background-color: #ff9d00;
            color: #fff;
            border-top-color: #ff9d00;
        }

        .header .head-left-nav .nav-sales:hover .nav-sec{
            background-color: #ff9d00;
            color: #fff;
            border-top-color: #ff9d00;
        }

        .header .head-left-nav .nav-sales .sales-item::after {
            border-top-color: white;
        }

        .header .head-left-nav .nav-sales:hover .sales-item::after {
            border-top-color: white;
        }
    </style>

</head>

<body>
    <script src="./js/toTravel_packageTour_data.js"></script>

    <!-- 头部 -->
    <div class="rightLine"></div>
    <div class="iconrrr">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>

    <div class="hdd">
        <div class="header">
            <div class="head-logo">
                <a class="mfw-logo" href="javascript:;" title="马蜂窝自由行">
                    <img src="./images/header-sprites15@2x.png" alt="">
                </a>
            </div>
            <ul class="head-left-nav">
                <li class="head-nav-item">
                    <a href="./home.html" class="nav-item ">首页</a>
                </li>
                <li class="head-nav-item">
                    <a href="./destination.html" class="nav-item">目的地</a>
                </li>
                <li class="head-nav-item">
                    <a href="./travel-strategy.html" class="nav-item">旅游攻略</a>
                </li>
                <li class="nav-sales">
                    <a href="javascript:;" class="sales-item nav-sec">去旅行</a>
                    <ul id="nav-sales">
                        <li><a href="./toTravel.html" class="sales-li-a">自由行</a></li>
                        <li><a href="./toTravel_packageTour.html" class="sales-li-a">跟团游</a></li>
                        <li><a href="javascript:;" class="sales-li-a">当地游</a></li>
                        <li><a href="javascript:;" class="sales-li-a">游轮</a></li>
                        <li><a href="./toTravel-visa.html" class="sales-li-a">签证</a></li>
                    </ul>
                </li>
                <li class="head-nav-item">
                    <a href="./ticket.html" class="nav-item">机票火车票</a>
                </li>
                <li class="head-nav-item">
                    <a href="./hotel.html" class="nav-item">订酒店</a>
                </li>
                <li class="nav-community">
                    <a href="javascript:;" style="cursor: default;" class="community-item">社区</a>
                    <div class="panel-wrapper">
                        <ul class="list-left">
                            <li><a href="javascript:;">问答</a></li>
                            <li><a href="javascript:;">马蜂窝周边</a></li>
                            <li><a href="javascript:;">蜂首</a></li>
                            <li><a href="javascript:;">结伴</a></li>
                        </ul>
                        <ul class="list-right">
                            <li><a href="javascript:;">小组论坛</a></li>
                            <li><a href="javascript:;">分舵同城</a></li>
                            <li><a href="javascript:;">马蜂窝拍卖行</a></li>
                            <li><a href="javascript:;">照片PK</a></li>
                            <li><a href="javascript:;">真人兽</a></li>
                            <li><a href="javascript:;">道具商店</a></li>
                        </ul>
                    </div>
                </li>
                <li class="head-nav-item">
                    <a href="./tourist.html" class="nav-item mfwzx">
                        <img src="./images/mfwzx.png" alt="">
                    </a>
                </li>
            </ul>
            <div class="head-search">
                <input type="text">
                <i></i>
            </div>
            <ul class="head-right-nav">
                <li>
                    <a href="javascript:;"></a>
                </li>
                <li>
                    <a href="javascript:;"></a>
                </li>
                <li>
                    <a href="javascript:;"></a>
                </li>
                <li><a href="javascript:;">登录</a></li>
                <li><span>|</span></li>
                <li><a href="javascript:;">注册</a></li>
            </ul>
        </div>
    </div>
    <!-- 内容区——跟团游 -->
    <div class="container clearfix">
        <!-- min小导航 -->
        <ul class="content toclick">
            <li><a href="./toTravel.html">自由行</a></li>
            <li>|</li>
            <li><a href="./toTravel_packageTour.html" class="active">跟团游</a></li>
            <li>|</li>
            <li><a href="#">当地游</a></li>
            <li>|</li>
            <li><a href="./toTravel-visa.html">签证</a></li>
            <li>|</li>
            <li><a href="#">全球WiFi</a></li>
            <li>|</li>
            <li><a href="#">邮轮</a></li>
        </ul>
        <!-- 搜索框 -->
        <div class="brand clearfix">
            <div class="left">
                <i></i>
                <a href="#">跟团游</a>
            </div>
            <div class="search">
                <div class="trigger"><b>武汉</b>出发</div>
                <i></i>
                <input type="text" placeholder="请输入目的地 / 产品名称">
                <a href="#">
                    <div class="icon-sousuo iconfont"></div>
                </a>
            </div>
        </div>
        <!-- from表单 -->

        <form class="from_travel">
            <div class="form_panel">
                <!-- 头部 -->
                <div class="form_hd clearfix">
                    <a href="javaScript:;" class="active_top">全部</a>
                    <a href="javaScript:;">境内半自助游</a>
                    <a href="javaScript:;">私家团</a>
                    <a href="javaScript:;">出境跟团游</a>
                    <a href="javaScript:;">游学团</a>
                    <a href="javaScript:;">出境半自助游</a>
                    <a href="javaScript:;">境内跟团游</a>
                </div>
                <!-- 内容区 -->
                <div class="form_bd">
                    <!-- 1 -->
                    <dl class="row clearfix">
                        <dt>出发日期：</dt>
                        <dd>
                            <ul class="clearfix">
                                <li><input type="checkbox" name="" class="u-radio" id="" checked='checked'>不限</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">10月</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">11月</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">12月</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">2022年1月</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">2月</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">3月</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">4月</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">5月</li>
                            </ul>
                        </dd>
                    </dl>
                    <!-- 2 -->
                    <dl class="row clearfix">
                        <dt>价格区间：</dt>
                        <dd>
                            <ul class="clearfix">
                                <li><input type="checkbox" name="" class="u-radio" id="" checked='checked'>不限</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">1040-2000</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">2000-3000</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">3000-10980</li>
                            </ul>
                        </dd>
                    </dl>
                    <!-- 3 -->
                    <dl class="row clearfix">
                        <dt>产品特色：</dt>
                        <dd>
                            <ul class="clearfix">
                                <li><input type="checkbox" name="" class="u-radio" id="" checked='checked'>不限</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">全程无自费</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">含自由活动</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">纯玩无购物</li>
                                <li><input type="checkbox" name="" class="u-radio" id="">含wifi／电话卡</li>
                            </ul>
                        </dd>
                    </dl>
                </div>
            </div>
        </form>
        <!-- sales_content  销售 -->
        <div class="sales_content">
            <!-- 导航 -->
            <div class="sales_bar">
                <ul class="clearfix">
                    <li><a id="a1" href="javaScript:;" class="active_sales">综合排序</a></li>
                    <li><a id="a1" href="javaScript:;">近期销量优先</a></li>
                    <li>
                        <a id="a1" href="javaScript:;" class="sales_price">价格
                           <i class="iconfont icon-xiangxia icon_1"></i>
                        </a>
                        <ul class="price_sort">
                            <li><a href="javaScript:;">价格从高到低</a></li>
                            <li><a href="javaScript:;">价格从低到高</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 数据 -->
            <div class="sales_list ">
                <a href="" class="item clearfix">
                    <!-- 左边图片 -->
                    <div class="pic_1">
                        <!--  -->
                        <img src="./images/sales_01.jpeg" alt="">
                        <span class="pic_text pic_10">
                        <strong class="pic_blue">南昌出发</strong>
                        <span class="pic_white">境内跟团游</span>

                    </div>
                    <!-- 右边详细内容 -->
                    <div class="detail">
                        <!-- 上 -->
                        <div class="detail_top">
                            <p class="s_sales">已售25</p>
                            <h3>国庆钜惠·陆地头等舱·云南昆明大理丽江6日游（3晚希尔顿豪华酒店+印象丽江大型表演+6大高标特色餐+洱海私人游艇+敞篷吉普车摆拍+玉龙雪山）</h3>
                            <!--  -->
                            <div class="s_tag">
                                <span>超值优惠享不停</span>
                                <span>动车返昆省时省力</span>
                                <span>新婚夫妇鲜花铺床</span>
                                <span>旅途中生日赠蛋糕</span>
                            </div>
                            <!--  -->
                            <p class="s_text">
                                <span class="t">班期:10/05-12/30&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;店铺:&nbsp;万合国旅</span>
                            </p>

                        </div>
                        <!-- 下 -->
                        <div class="detail_bottom">
                            <div class="action">
                                <span class="btn_1">立即预定</span>
                            </div>
                            <span class="price_1"><b>￥</b><strong>1737</strong>起</span>
                            <span class="promo_txt"><em>促销</em>早鸟优惠</span>
                        </div>

                    </div>
                </a>
            </div>
            <!-- 分页 -->
            <div class="page_nav clearfix">
                <!-- 页数列表 -->
                <ul class="page_list clearfix">
                    <!-- 上一页按钮 -->
                    <a href="javascript:;">
                        <li id="prev">«上一页</li>
                    </a>
                    <a href="javascript:;">
                        <li class="page-num active_page">1</li>
                    </a>
                    <a href="javascript:;">
                        <li class="page-num">2</li>
                    </a>
                    <a href="javascript:;">
                        <li class="page-num">3</li>
                    </a>
                    <a href="javascript:;">
                        <li class="page-num">4</li>
                    </a>
                    <a href="javascript:;">
                        <li class="page-num">5</li>
                    </a>
                    <a href="javascript:;">
                        <li class="page-num">6</li>
                    </a>
                    <a href="javascript:;">
                        <li class="page-num">7</li>
                    </a>
                    <a href="javascript:;">
                        <li class="page-num">8</li>
                    </a>
                    <a href="javascript:;">
                        <li class="page-num active">9</li>
                    </a>
                    <!-- 下一页按钮 -->
                    <a href="javascript:;">
                        <li id="next">下一页»</li>
                    </a>
                </ul>

            </div>
        </div>

        <!-- sales_right -->
        <div class="sales_right">
            <div class="sales_title">
                <h3>本周热卖</h3>
            </div>
        </div>

    </div>
    <footer>
        <div class="ft-content">
            <!-- ul加二维码 -->
            <div class="ft-info">
                <dl>
                    <dt>马蜂窝旅游网</dt>
                    <dd>中国年轻代用得更多的旅游网站</dd>
                    <dd>上亿旅行者共同打造的<span>"旅行神器"</span></dd>
                    <dd><span>60,000</span> 多个全球旅游目的地</dd>
                    <dd><span>600,000</span> 个细分目的地新玩法</dd>
                    <dd><span>760,000,000</span> 次攻略下载</dd>
                    <dd><span>38,000</span> 家旅游产品供应商</dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd><span>关于马蜂窝</span><span>联系我们</span></dd>
                    <dd><span>隐私政策</span><span>商标声明</span></dd>
                    <dd>服务协议</dd>
                    <dd>商城平台服务协议</dd>
                    <dd>网络信息侵权通知指引</dd>
                    <dd>马蜂窝旅游网服务监督员</dd>
                    <dd>网站地图<span>加入马蜂窝</span></dd>
                </dl>
                <dl>
                    <dt>旅行服务</dt>
                    <dd>旅游攻略</dd>
                    <dd>酒店预订</dd>
                    <dd>旅游特价</dd>
                    <dd>国际租车</dd>
                    <dd>旅游问答</dd>
                    <dd>旅游保险</dd>
                    <dd>旅游指南</dd>
                    <dd>订火车票</dd>
                    <dd>旅游资讯</dd>
                    <dd>APP下载</dd>
                    <dd><span>旅行商城全球商家入驻</span></dd>
                </dl>
                <div class="pic">
                    <div class="pic-1">
                        <img src="https://p3-q.mafengwo.net/s10/M00/48/A9/wKgBZ1t_4sSAVJ6uAAAlzJ0PZgU881.png?imageMogr2%2Fthumbnail%2F%2194x90r%2Fgravity%2FCenter%2Fcrop%2F%2194x90%2Fquality%2F90" alt="">
                        <p>马蜂窝APP<br>扫描立即下载</p>
                    </div>
                    <div class="pic-2">
                        <img src="https://p3-q.mafengwo.net/s10/M00/48/A9/wKgBZ1t_4sSAVJ6uAAAlzJ0PZgU881.png?imageMogr2%2Fthumbnail%2F%2194x90r%2Fgravity%2FCenter%2Fcrop%2F%2194x90%2Fquality%2F90" alt="">
                        <p>马蜂窝旅游<br>订阅号</p>
                    </div>
                    <div class="pic-3">
                        <img src="https://p3-q.mafengwo.net/s10/M00/48/A9/wKgBZ1t_4sSAVJ6uAAAlzJ0PZgU881.png?imageMogr2%2Fthumbnail%2F%2194x90r%2Fgravity%2FCenter%2Fcrop%2F%2194x90%2Fquality%2F90" alt="">
                        <p>马蜂窝良品<br>官方服务号</p>
                    </div>
                </div>
            </div>

            <!-- 旅游之前,先上马蜂窝! -->
            <div class="ft-center">
                <p>旅游之前,先上马蜂窝!</p>
                <ul>
                    <li><a href="#"><i></i></a></li>
                    <li><a href="#"><i></i></a></li>
                </ul>

            </div>

            <!-- 底部信息 -->
            <div class="ft-copyright">
                <div class="ft-copyright-top">
                    <div class="left"></div>
                    <p>@ 2021 Mafengwo.cn 京ICP备11015476号。<img src="https://images.mafengwo.net/images/footer/police_record.png">京公网安备11010502013401号京ICP证110318号</p>
                    <pre>网络出版服务许可证 增值电信业务经营许可证 营业执照广 播电视节目制作经营许可证 网络文化许可证 网上有害信息举报专区 帮助中心</pre>
                    <p>违法和不良信息举报电话: 010- 83416877举报邮箱: mfwjubao@mafengwo.com涉末成年人不良信息专用举报邮箱: wcnjubao@mafengwo.com全国旅游投诉电话: 12301</p>
                    <p>马蜂窝客服 : 国内<span>4006 345-678</span> 海外 <span>+86- 10-8341-6888</span></p>
                </div>
                <!-- 三张图片 -->
                <div class="ft-copyright-bottom">
                    <a href="#"><span class="p1"></span></a><a href="#"><span class="p2"></span></a><a href="#"><span class="p3"></span></a>
                </div>
            </div>
        </div>
    </footer>

    <script src="./js/jQuery.js"></script>
    <script src="./js/toTravel.js"></script>
    <script src="./js/jQuery.min.js"></script>
    <script>
        //   console.log('去旅行数据===>', tour_data)
        // console.log($('.sales_list'))
        //存放销量
        var sales = []
            // 封装函数
        function tourStr(n) {
            var str = '',
                last_n = parseInt(n) * 10
            n = parseInt(--n) * 10

            for (var i = n; i < last_n; i++) {
                // console.log(tour_data[i].s_sales)
                str += ' <a href="" class="item clearfix">'
                str += '<div class="pic_1">';
                str += '<img src="' + tour_data[i].img + '">';
                str += '<span class="pic_text pic_10">';
                str += '<strong class="pic_blue">南昌出发</strong>';
                str += '<span class="pic_white">境内跟团游</span>';
                str += '</div>';
                str += '<div class="detail">';
                str += '<div class="detail_top">';
                str += '<p class="s_sales">' + tour_data[i].s_sales + '</p>';
                str += '<h3>' + tour_data[i].info + '</h3>';
                str += '<div class="s_tag">';
                str += '<span>' + tour_data[i].s_tag_1 + '</span>';
                str += '<span>' + tour_data[i].s_tag_2 + '</span>';
                str += '<span>' + tour_data[i].s_tag_3 + '</span>';
                str += '<span>' + tour_data[i].s_tag_4 + '</span>';
                str += '</div>';
                str += '<p class="s_text">';
                str += '<span class="t">' + tour_data[i].s_data + '</span>';
                str += '</p>';
                str += '</div>';
                str += '<div class="detail_bottom">';
                str += '<div class="action">';
                str += '<span class="btn_1">立即预定</span>';
                str += '</div>';
                str += '<span class="price_1">' + tour_data[i].s_price + '</span>';
                str += '<span class="promo_txt">' + tour_data[i].s_txt + '</span>';
                // str += '<span class="discount_tag">' + tour_data[i].s_discount + '</span>';
                str += '</div>';
                str += '</div>';
                str += '</a>'
                sales.push(tour_data[i].s_sales)

            }
            // console.log('存放销量===>', salesStr)
            $('.sales_list').empty().append(str)

        }

        tourStr(1)

        //页面跳转
        var num = 1,
            i
        $('.page_list').on('click', '.page-num', function() {
            num = $(this).text()
            $('.page-num').removeClass('active_page')
            $(this).addClass('active_page')
                // 调用函数
            tourStr(num)
            $('body,html').animate({
                scrollTop: $('.sales_content').offset().top
            }, 1000)
        })

        //上一页
        $("#prev").on("click", function() {
                num--
                i = num - 1
                num = num <= 1 ? 1 : num
                i = i <= 0 ? 0 : i
                $(".page-num").removeClass("active_page")
                $(".page-num").eq(i).addClass("active_page")
                    // 调用函数
                tourStr(num)
                $("body,html").animate({
                    scrollTop: $('.sales_content').offset().top
                }, 2000);
            })
            //下一页    
        $("#next").on("click", function() {
                num++
                i = num - 1
                num = num >= 9 ? 9 : num
                i = i >= 8 ? 8 : i
                $(".page-num").removeClass("active_page")
                $(".page-num").eq(i).addClass("active_page")
                    // 调用函数
                tourStr(num)
                $("body,html").animate({
                    scrollTop: $('.sales_content').offset().top
                }, 2000);
            })
            //近期销量
        $('.sales_bar>ul').on('click', '#a1', function() {
                console.log(this)
                $('.sales_bar>ul>li>a').removeClass('active_sales')
                $(this).addClass('active_sales')
                    // tourStr(num)
                    // console.log('存放销量===>', salesStr)
            })
            // 封装近期销量函数
        function salesStr() {
            // 排序
        }
        salesStr()

        //  <!-- from表单 -->
        $('.form_hd').on('click', 'a', function() {
            $('.form_hd>a').removeClass('active_top')
            $(this).addClass('active_top')
        })
    </script>
</body>

</html>